// pages/song-player/index.js
import { playerStore } from '../../store/index'
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /****** 音乐播放器的信息 ******/
    // 音频id
    id: 0,
    // 音频时间
    durationTime: 0,
    // 当前音频时间
    currentTime: 0,
    // 歌曲信息\歌曲列表\歌曲列表中的索引
    songData: {},
    songList: [],
    songIndex: -1,
    // 进度条数据
    sliderValue: 0,
    isPulling: false, // 进度条是否在拖拽
    // 歌词信息
    lyricData: [],
    // 歌词当前所在位置索引
    lyricIndex: 0,
    // 播放状态
    playerState: false,
    // 播放模式 0:循环播放 1:单曲循环 2:随机播放
    playerMode: 0,
    // 歌词信息
    lyric: [],
    /****** 其他信息 ******/
    topBarHeight: 0,
    windowHeight: 0,
    // 展示信息，0：展示歌曲基本信息 1：展示歌词信息
    showPage: 0,
    showForm: false,
    bottomBarHeight: 0,
    lyricScollTop: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1.调用初始化音乐
    playerStore.dispatch("initSong", options.id)
    // 2.设置监听数据
    this.spyData()
    // 3.设置各类高度信息
    this.setDeviceData()
    // 4.获取底部栏的高度
    const query = wx.createSelectorQuery()
    query.select(".control-block").boundingClientRect(rect => {
      this.setData({ bottomBarHeight: rect.height })
    }).exec()
  },
  // 监听数据
  spyData() {
    playerStore.onStates(["songData", "currentTime", "sliderValue", "playerState", "playerMode", "lyricIndex", "id", "lyric", "songList", "songIndex"], ({
      songData,
      currentTime,
      sliderValue,
      playerState,
      playerMode,
      lyricIndex,
      id,
      lyric,
      songList,
      songIndex
    }) => {
      if(songData) {
        this.setData({songData})
      }
      if(currentTime) {
        this.setData({currentTime})
        // 判断歌词的变化
        const lyricIndex = this.data.lyricIndex
        const lyric = this.data.lyric
        if(lyricIndex + 1 < lyric.length && currentTime > lyric[lyricIndex + 1].time) {
          this.setData({lyricIndex: lyricIndex + 1, lyricScollTop: (lyricIndex + 1) * 31})
        } 
      }
      if(sliderValue && !this.data.isPulling) {
        this.setData({sliderValue})
      }
      if(playerState != undefined && playerState != this.data.playerState) {
        this.setData({playerState})
      }
      if(playerMode != undefined && playerMode != this.data.playerMode) {
        this.setData({playerMode})
      } 
      if(lyricIndex && lyricIndex != this.data.lyricIndex) {
        this.setData({ lyricIndex, lyricScollTop: lyricIndex * 31 })
      }
      if(id != undefined) {
        this.setData({ id })
      }
      if(lyric && lyric.length != 0) {
        this.setData({lyric})
      }
      if(songList && songList.length != 0) {
        this.setData({songList})
      }
      if(songIndex != undefined && songIndex != this.data.songIndex) {
        this.setData({songIndex})
      }
    })
  },
  // 设置设备数据
  setDeviceData() {
    this.setData({ 
      topBarHeight: app.globalData.statusBarHeight,
      windowHeight: app.globalData.windowHeight
    })
  },
  
  /**************************** 事件监听 ****************************/
  // 拖动进度条完成后
  handleSliderChange(e) {
    const value = e.detail.value
    playerStore.dispatch("changeProgress", value)
    this.setData({ isPulling: false })
  },
  // 拖动进度条中
  handleSliderChanging() {
    this.setData({ isPulling: true })
  },
  // 音乐播放/暂停
  handleClickChangePlay() {
    playerStore.dispatch("changePlayState")
  },
  // 音乐模式变化
  changePlayerMode() {
    playerStore.dispatch("changePlayerMode")
  },
  // 点击背景切换页面
  handleClickBgc() {
    const result = (this.data.showPage == 0 ? 1 : 0)
    this.setData({showPage: result})
  },
  // 返回
  handleClickBack() {
    wx.navigateBack()
  },
  // 上一首
  handleClickPre() {
    playerStore.dispatch("changeSong", false)
  },
  // 下一首
  handleClickNext() {
    playerStore.dispatch("changeSong")
  },
  // 展示歌单
  handleClickShowForm() {
    this.setData({showForm: !this.data.showForm})
  }

})